<template>
  <div class="layout-wrapper">
    <!-- 左侧导航 -->
    <aside class="layout-sider">
      <SideNav
        :nav-items="navItems"
        :current-key="activeNavKey"
        @change="handleNavChange"
      />
    </aside>

    <!-- 右侧主内容 -->
    <main class="layout-main">
      <h2 class="page-title">{{ currentTitle }}</h2>
      <keep-alive :include="cachedViews">
        <component :is="currentComponent" />
      </keep-alive>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import SideNav from "./SideNav.vue";
import OrganizationTable from "./OrganizationTable.vue";
import positionManage from "./positionManage.vue";
import levelManage from "./levelManage.vue";
// import orgSetting from "./orgSetting.vue";

// 需要缓存的组件名称列表
const cachedViews = ["OrganizationTable", "positionManage"];

// 导航列表（可扩展其他页面）
const navItems = ref([
  { label: "部门管理", key: "org-structure" },
  // { label: "架构图", key: "org-chart" },
  { label: "岗位管理", key: "position-manage" },
  { label: "职位管理", key: "level-manage" },
  // { label: "组织设置", key: "org-setting" },
]);

// 当前激活的导航项
const activeNavKey = ref("org-structure");

// 计算当前要显示的组件
const currentComponent = computed(() => {
  switch (activeNavKey.value) {
    case "org-structure":
      return OrganizationTable;
    case "position-manage":
      return positionManage;
    case "level-manage":
      return levelManage;
    default:
      return OrganizationTable;
  }
});

// 计算当前页面标题
const currentTitle = computed(() => {
  const item = navItems.value.find((item) => item.key === activeNavKey.value);
  return item ? item.label : "组织架构";
});

// 导航切换逻辑
const handleNavChange = (key: string) => {
  activeNavKey.value = key;
};
</script>

<style scoped>
.layout-wrapper {
  display: flex;
  height: calc(100vh - 140px); /* 适配顶部导航高度，按需调整 */
}

.layout-sider {
  width: 140px;
  background-color: #f5f7fa;
  padding: 20px;
  transition: width 0.2s;
}

.layout-main {
  flex: 1;
  padding: 20px;
  background-color: #ffffff;
  overflow-y: auto;
  transition: padding 0.2s;
  min-height: 200px;
  display: block;
}

.page-title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

/* 新增：左侧导航选中项颜色 */
.layout-sider .side-nav-item.active {
  color: #203a64 !important;
}

/* 媒体查询：移动端适配 */
@media (max-width: 1000px) {
  .layout-wrapper {
    flex-direction: column;
    height: auto;
    /* width: 100vw; */
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .layout-sider {
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  /* 横向导航tab容器加滚动 */
  .layout-sider .el-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #e4eaf3 #fff;
  }
  .layout-sider .el-menu::-webkit-scrollbar {
    height: 6px;
  }
  .layout-sider .el-menu::-webkit-scrollbar-thumb {
    background: #e4eaf3;
    border-radius: 3px;
  }
  .layout-sider .el-menu-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    padding: 0 16px !important;
    height: 44px !important;
    font-size: 15px;
    margin: 0 6px;
    border-radius: 6px 6px 0 0;
    background: none !important;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
    white-space: nowrap;
  }
  .layout-sider .el-menu-item.active,
  .layout-sider .el-menu-item.is-active {
    color: #203a64 !important;
    background: #fff !important;
    border-bottom: 2px solid #203a64;
    font-weight: bold;
  }
  .side-nav-label {
    font-size: 13px;
  }
  .layout-main {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 8px;
    overflow-x: auto;
  }
  .page-title {
    font-size: 15px;
    margin-bottom: 10px;
  }
}
</style>
